<template>
	<view class="boxes">
		{{title }} {{timeMsg.after}}
		<view class="timeBox">
			<view class="timeBox1" v-for="(item,index) in timeMsg.before">
				<view class="box">
					{{item}}
				</view>
				<view class="maohao" v-if="(index+1)<timeMsg.before.length">
					:
				</view>



			</view>


		</view>

	</view>
</template>

<script>
	export default {
		name: "countDonw",
		props:['endTime'],
		data() {
			return {
				timeMsg: "", //时间
				timer: '',
				title: "距离报名结束还有 ",
				over:false,

			};
		},
		mounted() {
		      console.log("endtimevv "+this.endTime);
			  this.countDonw();
		},
		methods: {
			/**
			 * 倒计时
			 */
			countDonw() { 
				var countDonw = () => { //倒计时的函数
					let currentTime = Date.now(); //当前的时间错
					let surpuls = this.endTime*1000 - currentTime; //剩余的时间
					if (surpuls >= 0) {
						this.timeMsg = this.changeTime(surpuls);
					} else {
						this.title = "活动已经结束";
						this.over=true;
						this.$emit('countDown',this.over);
						this.timeMsg = {
							after: "",
							before: []
						};
						clearInterval(this.timer);
					}

				}
				this.timer = setInterval(countDonw, 100);

			},
			ceshi(){
				return 1;
			},
			/**
			 * 时间的格式转换
			 * @param {Object} time
			 */
			changeTime(time) {
				var d = new Date(time);
				let year = (d.getFullYear() - 1970) == 0 ? "" : (d.getFullYear() - 1970) + "年";
				let html = "<view class='box'>s</view>";
				var month = parseInt((time / 1000 / 60 / 60 / 24 / 30) % 12); //月
				let mon = month < 10 ? "0" + month + "月" : month + "月";
				var day1 = parseInt((time / 1000 / 60 / 60 / 24) % 30); //天数
				let day = day1 < 10 ? "0" + day1 + "天" : day1 + "天";
				var hour = parseInt((time / 1000 / 60 / 60) % 24); //小时
				let hours = hour < 10 ? "0" + hour : hour;
				var minute = parseInt((time / 1000 / 60) % 60); //  分钟
				let min = minute < 10 ? "0" + minute : minute;
				let sec = parseInt((time / 1000) % 60) < 10 ? "0" + parseInt((time / 1000) % 60) : parseInt((time / 1000) % 60); //秒
				if (day1 == 0) {
					day = "";
				}
				if (month == 0) {
					mon = "";
				}
				if (hour == 0) {
					hours = "00";
				}
				if (minute == 0) {
					min = "00";
				}
				let array = {
					after: year + mon + day,
					before: [hours, min, sec]
				}
				if (day1 == 0 && month == 0 && hour == 0 && min == 0 && sec == 0 && year == 0) {
					array = {
						after: "",
						before: []
					};
				}


				return array;
			}
		}
	}
</script>

<style scoped>
	.boxes {
		display: flex;
		height: 5vh;
		align-items: center;
		justify-content: center;
		background-color: #FFE4E4;
		color: red;
		font-weight: 600;
	}

	.timeBox {
		margin-left: 1vw;
		display: flex;
		flex-direction: row;
		height: 4vh;
		align-items: center;

	}

	.box {

		height: 3vh;
		padding: 0vw 1vw 0vw 1vw;
		background-color: red;
		color: white;
		line-height: 3vh;
		text-align: center;
		border-radius: 3px;
	}

	.timeBox1 {
		height: 4vh;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.maohao {
		padding: 0 1vw 0 1vw;
	}
</style>
